<template>
  <div class="layout" :class="{'layout-hide-text': spanLeft < 3}">
    <i-row type="flex">
      <i-col :span="spanLeft" class="layout-menu-left">
        <i-menu :active-name="activeMenu" theme="dark" width="auto" @on-select="selectMenu">
          <div class="layout-logo-left">
            <img class="logo" src="../assets/logo.png" />
            <div v-if="spanLeft >= 3" class="name">王 宫 制 作 所</div>
          </div>
          <router-link to="/home/students">
            <i-menu-item name="students">
              <i-icon type="person" :size="iconSize"></i-icon>
              <span class="layout-text">学生管理</span>
            </i-menu-item>
          </router-link>
          <router-link to="/home/holidays">
            <i-menu-item name="holidays">
              <i-icon type="calendar" :size="iconSize"></i-icon>
              <span class="layout-text">假期管理</span>
            </i-menu-item>
          </router-link>
          <router-link to="/home/class-hours">
            <i-menu-item name="class-hours">
              <i-icon type="clock" :size="iconSize"></i-icon>
              <span class="layout-text">课时管理</span>
            </i-menu-item>
          </router-link>
          <router-link to="/home/attendances">
            <i-menu-item name="attendances">
              <i-icon type="checkmark" :size="iconSize"></i-icon>
              <span class="layout-text">考勤管理</span>
            </i-menu-item>
          </router-link>
          <router-link to="/home/works">
            <i-menu-item name="works">
              <i-icon type="image" :size="iconSize"></i-icon>
              <span class="layout-text">作品管理</span>
            </i-menu-item>
          </router-link>
          <router-link to="/home/statistics">
            <i-menu-item name="statistics">
              <i-icon type="calculator" :size="iconSize"></i-icon>
              <span class="layout-text">统计资料</span>
            </i-menu-item>
          </router-link>
        </i-menu>
      </i-col>
      <i-col :span="spanRight">
        <div class="layout-header">
          <i-button type="text" @click="toggleClick">
            <i-icon type="navicon" size="32"></i-icon>
          </i-button>
          <span class="user-info">
            欢迎，{{user.name}}&nbsp;&nbsp;&nbsp;
            <a href="" @click="doLogout">安全退出</a>
          </span>
        </div>
        <div class="layout-content">
          <div class="layout-content-main">
            <router-view></router-view>
          </div>
        </div>
        <div class="layout-copy">
          2017-2020 &copy; 王宫制作所
        </div>
      </i-col>
    </i-row>
  </div>
</template>

<script>
import common from "@/common";

export default {
  data() {
    return {
      spanLeft: 3,
      spanRight: 21,
      activeMenu: window.location.hash.substr(2),
      user: {}
    };
  },
  computed: {
    iconSize() {
      return this.spanLeft === 3 ? 14 : 24;
    }
  },
  mounted() {
    let account = "";

    const authorization = localStorage.getItem("Authorization");
    if (authorization) {
      const payloadBase64 = authorization.split(".")[1];
      const payload = window.atob(payloadBase64);
      const payloadObj = JSON.parse(payload);
      account = payloadObj.sub;
    }

    this.axios.get("/users/" + account).then(response => {
      this.user = response;
    });
  },
  methods: {
    toggleClick() {
      if (this.spanLeft === 3) {
        this.spanLeft = 1;
        this.spanRight = 23;
      } else {
        this.spanLeft = 3;
        this.spanRight = 21;
      }
    },
    selectMenu(menu) {
      this.activeMenu = menu;
    },
    doLogout() {
      common.removeAuthorization();
      this.$router.push("/");
    }
  }
};
</script>

<style lang="less" scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.layout-breadcrumb {
  padding: 10px 15px 0;
}

.layout-content {
  min-height: 200px;
  margin: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}

.layout-content-main {
  padding: 10px;
}

.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
}

.layout-menu-left {
  background: #464c5b;
}

.layout-header {
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
  .logo {
    width: 30px;
    height: 30px;
  }
  .name {
    color: #fff;
    font-weight: bold;
    float: right;
    width: 80%;
    line-height: 30px;
    text-align: center;
  }
}

.layout-ceiling-main a {
  color: #9ba7b5;
}

.layout-hide-text .layout-text {
  display: none;
}

.ivu-col {
  transition: width 0.2s ease-in-out;
}

.user-info {
  float: right;
  padding: 6px 15px;
  line-height: 33px;
}
</style>
